<template>
  <div>
    <bread-crumb :breadInfoList="breadInfoList"></bread-crumb>
    <common-card>
      <div class="container" slot="card-info">
        <el-form :model="form" ref="form">
          <el-form-item
            prop="title"
            label="标题："
            label-width="80px"
            :rules="[{required:true,message:'标题不能为空',trigger:'blur'}]"
          >
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="desc"
            label="导读："
            label-width="80px"
            :rules="[{required:true,message:'导读不能为空',trigger:'blur'}]"
          >
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item
            prop="imglist"
            label="封面："
            label-width="80px"
            :rules="[{required:true,message:'请上传封面',trigger:'change'}]"
          >
            <common-upload
              @imglistChange="imglistChange($event,val)"
              ref="myUpload"
              :filelist="myFileList"
              :imglist="form.imglist"
            ></common-upload>
          </el-form-item>
          <el-form-item
            prop="content"
            label="正文："
            label-width="80px"
            :rules="[{required:true,message:'正文不能为空',trigger:'blur'}]"
          >
            <!-- <VueUeditorWrap v-model="form.content" :config="myUeditorConfig" @ready="editorReady"/> -->
            <common-editor :html="form.content" @change="change(arguments)"></common-editor>
            </el-form-item>
            <el-form-item size="large" style="margin-top:20px;margin-left:80px">
              <el-button type="primary" @click="onOk('form')" :loading="isLoading" size="small">保存</el-button>
            </el-form-item>
          
        </el-form>
      </div>
    </common-card>
  </div>
</template>
<script>
import commonCard from "@/components/commonCard";
import breadCrumb from "@/components/commonBreadCrumb";
import commonUpload from "@/components/commonUpLoad";
import commonEditor from "@/components/commonEditor"
import VueUeditorWrap from "vue-ueditor-wrap";
import News from "@/api/news";
import Common from "@/api/common";
import apiConfig from "@/utils/apiConfig";
import {isEmpty} from "@/utils/func"
const { api } = apiConfig;
export default {
  data() {
    return {
      id: "",
      breadInfoList: [],
      upLoadUrl: api["imgUpload"],
      isLoading: false,
      myFileList:[],
      form: {
        desc: "",
        content: "",
        title: "",
        imglist: []
      },
      html:''
      // myUeditorConfig: {
      //   // serverUrl: api['imgUpload'],
      //   serverUrl:'http://35.201.165.105:8000/controller.php',
      //   initialFrameWidth:900,
      //   initialFrameHeight:500
      // }
    };
  },
  created() {
    this.breadInfoList =
      this.$route.params && this.$route.params.id
        ? ["新闻管理", "内容管理", "修改文章"]
        : ["新闻管理", "内容管理", "添加文章"];
  },
  async mounted() {
    let params = this.$route.params;

    if (params && params.id) {
      this.id = params.id;
      let result = await News.getNewsArticleInfo(params.id);
      let data = result.content;
      for (let key in this.form) {
        this.form[key] = data[key];
      }
      this.myFileList = this.form["imglist"];
    }
  },
  methods: {
    async onOk(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) {
          return false;
        } else {
          //按钮开始出现loading
          this.isLoading = true;
          let data = !this.id
            ? await News.addNewsArtical(this.form)
            : await News.updateNewsArtical(this.id, this.form);
          if (data.success) {
            this.isLoading = false;
            console.log(this.form["imglist"]);
            this.myFileList = this.form["imglist"];

            this.$message({
              message: "保存文章成功!",
              type: "success"
            });
            this.myFileList = [];
            this.$router.push({ path: "/news/grid", query: {} });
          } else {
            this.$message.error("保存文章失败!");
          }
        }
      });
    },
    imglistChange(val) {
      console.log(val);
      this.form["imglist"] = val;
    },
    change(_arguments){
      let html=_arguments[0],
          content=_arguments[1]
      //判断富文本编辑器是否为空
      this.form['content']=isEmpty(content)&&!html.includes('img')?'':html
    }
  },
  components: {
    commonCard,
    breadCrumb,
    commonUpload,
    VueUeditorWrap,
    commonEditor
  }
};
</script>
<style lang='scss' scoped>
.container {
  height: 90%;
  /deep/ .el-form-item__content {
    text-align: left;
  }
}
</style>